import {Component} from "react";
import React from "react";

export const withInnerWidth = (option) => (OriComponent) => class InnerWidthComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      innerWidth: window.innerWidth,
    };
    this.handleResize = this.handleResize.bind(this)
  }

  // 生命周期钩子和事件处理器与 mixin 的完全一样：
  componentDidMount() {
    window.addEventListener('resize', this.handleResize)
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.handleResize)
  }

  handleResize() {
    this.setState({
      innerWidth: window.innerWidth,
    })
  }

  render() {
    return <OriComponent {...this.props} {...this.state} />
  }
};
